<template>
  <div id="container">
    <ion-row>
      <ion-col text-center class="confirm">新问题</ion-col>
      <ion-col></ion-col>
      <ion-col text-center class="confirm">重听</ion-col>
    </ion-row>
    <div class="tip">
      <div class="yf" v-for="(item, index) in note" :key="index" v-show="showNote" @click="selectValue(item.value, 'note')">
        <ion-icon aria-hidden="true" :class="item.icon" />
      </div>
      <div class="yf" v-for="(item, index) in rest" :key="index" v-show="showRest" @click="selectValue(item.value, 'rest')">
        <ion-icon aria-hidden="true" :class="item.icon" />
      </div>
    </div>
   <div class="con">
      <div class="left">
        <div @click="drawYf('', '')">无</div>
        <div>
          <ion-icon aria-hidden="true" class="icon--2" @click="drawYf('^', '')" />
        </div>
        <div>
          <ion-icon aria-hidden="true" class="icon--3" @click="drawYf('^^', '')" />
        </div>
        <div>
          <ion-icon aria-hidden="true" class="icon--4" @click="drawYf('=', '')" />
        </div>
        <div>
          <ion-icon aria-hidden="true" class="icon--5" @click="drawYf('_', '')" />
        </div>
        <div>
          <ion-icon aria-hidden="true" class="icon--5" @click="drawYf('__', '')" />
        </div>
      </div>
      <div class="box">
        <ion-row>
          <ion-col>
            <div>./</div>
          </ion-col>
          <ion-col @click="drawYf('C', 'note')">
            <div class="noteyf" :class="{'active': showBg}">C</div>
          </ion-col>
          <ion-col @click="drawYf('D', 'note')">
            <div class="noteyf" :class="{'active': showBg}">D</div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col @click="drawYf('E', 'note')">
            <div class="noteyf" :class="{'active': showBg}">E</div>
          </ion-col>
          <ion-col @click="drawYf('F', 'note')">
            <div class="noteyf" :class="{'active': showBg}">F</div>
          </ion-col>
          <ion-col @click="drawYf('G', 'note')">
            <div class="noteyf" :class="{'active': showBg}">G</div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col @click="drawYf('A', 'note')">
            <div class="noteyf" :class="{'active': showBg}">A</div>
          </ion-col>
          <ion-col @click="drawYf('B', 'note')">
            <div class="noteyf" :class="{'active': showBg}">B</div>
          </ion-col>
          <ion-col @click="showRest = !showRest;showNote = false">
            <div><ion-icon aria-hidden="true" class="icon--16" /></div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col @click="drawYf('+', '')">
            <div>+8va</div>
          </ion-col>
          <ion-col @click="drawYf('-', '')">
            <div>-8va</div>
          </ion-col>
          <ion-col @click="drawYf('|', '')">
            <div>小节</div>
          </ion-col>
        </ion-row>
      </div>
      <div class="right">
        <div class="del" @click="del()"><ion-icon :icon="trashBinOutline"></ion-icon></div>
        <div @click="setGroup()"><ion-icon :icon="arrowUpOutline"></ion-icon></div>
        <div>完成</div>
      </div>
   </div>
  </div>
</template>

<script lang="ts">
import { IonRow, IonCol, IonIcon } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { trashBinOutline, arrowUpOutline } from 'ionicons/icons';
import { PublicService } from '@/utils/public';
export default {
  components: {
    IonRow, IonCol, IonIcon
  },
  props: {
    L: {
      type: Number,
      default: 4
    }
  },
  setup(props: any, context: any) {
    const publicService = new PublicService();
    const width = window.innerWidth - 3;
    const max = 32;
    const note = [] as any;
    const fhList = ['^', '^^', '=', '_', '__'];
    const num = {
      4: { // L: 4
        note: [
          {
            icon: 'icon--8',
            value: 'A4'
          },
          {
            icon: 'icon--9',
            value: 'A2'
          },
          {
            icon: 'icon--10',
            value: 'A'
          },
          {
            icon: 'icon--11',
            value: 'A/2'
          },
          {
            icon: 'icon--12',
            value: 'A/4'
          },
          {
            icon: 'icon--13',
            value: 'A/8'
          }
        ],
        rest: [
          {
            icon: 'icon--14',
            value: 'z4'
          },
          {
            icon: 'icon--15',
            value: 'z2'
          },
          {
            icon: 'icon--16',
            value: 'z'
          },
          {
            icon: 'icon--17',
            value: 'z/2'
          },
          {
            icon: 'icon--18',
            value: 'z/4'
          },
          {
            icon: 'icon--19',
            value: 'z/8'
          }
        ],
      },
      16: { //L: 16
        note: [
          {
            icon: 'icon--8',
            value: 'A16'
          },
          {
            icon: 'icon--9',
            value: 'A'
          },
          {
            icon: 'icon--10',
            value: 'A2'
          },
          {
            icon: 'icon--11',
            value: 'A4'
          },
          {
            icon: 'icon--12',
            value: 'A8'
          },
          {
            icon: 'icon--13',
            value: 'A16'
          }
        ],
        rest: [
          {
            icon: 'icon--14',
            value: 'z/2'
          },
          {
            icon: 'icon--15',
            value: 'z'
          },
          {
            icon: 'icon--16',
            value: 'z2'
          },
          {
            icon: 'icon--17',
            value: 'z4'
          },
          {
            icon: 'icon--18',
            value: 'z8'
          },
          {
            icon: 'icon--19',
            value: 'z16'
          }
        ],
      },
      8: {
        note: [
          {
            icon: 'icon--8',
            value: 'A/4'
          },
          {
            icon: 'icon--9',
            value: 'A/2'
          },
          {
            icon: 'icon--10',
            value: 'A'
          },
          {
            icon: 'icon--11',
            value: 'A2'
          },
          {
            icon: 'icon--12',
            value: 'A4'
          },
          {
            icon: 'icon--13',
            value: 'A8'
          }
        ],
        rest: [
          {
            icon: 'icon--14',
            value: 'z/4'
          },
          {
            icon: 'icon--15',
            value: 'z/2'
          },
          {
            icon: 'icon--16',
            value: 'z'
          },
          {
            icon: 'icon--17',
            value: 'z2'
          },
          {
            icon: 'icon--18',
            value: 'z4'
          },
          {
            icon: 'icon--19',
            value: 'z8'
          }
        ],
      },
      2: {
        note: [
          {
            icon: 'icon--8',
            value: 'A/16'
          },
          {
            icon: 'icon--9',
            value: 'A/8'
          },
          {
            icon: 'icon--10',
            value: 'A/4'
          },
          {
            icon: 'icon--11',
            value: 'A/2'
          },
          {
            icon: 'icon--12',
            value: 'A'
          },
          {
            icon: 'icon--13',
            value: 'A2'
          }
        ],
        rest: [
          {
            icon: 'icon--14',
            value: 'z/16'
          },
          {
            icon: 'icon--15',
            value: 'z/8'
          },
          {
            icon: 'icon--16',
            value: 'z/4'
          },
          {
            icon: 'icon--17',
            value: 'z/2'
          },
          {
            icon: 'icon--18',
            value: 'z'
          },
          {
            icon: 'icon--19',
            value: 'z/2'
          }
        ],
      }
    }
    const state = reactive({
      note: (num as any)[props.L].note as any,
      rest: (num as any)[props.L].rest as any,
      showBg: false,
      showRest: false,
      showNote: false,
      text: '' as any,
      nodeText: '',
      group: [] as any,
      groupIndex: -1,
      nodeList: [] as any,
      nodeListIndex: 0,
    })

    function drawYf(note: string, type: string){
      if(note === '+'){
        if(fhList.includes(state.nodeList[state.nodeList.length - 1])){
          publicService.thsToast('修饰符后必须跟音符');
          return;
        }
        if(state.nodeList[state.nodeList.length - 1] === ','){
          state.nodeList.splice(state.nodeList.length - 1, 1);
        } else {
          note = note.replace('+', "'");
          state.nodeList.push(note);
        }
        state.text = state.nodeList.join('');
        state.showNote = false;
        state.showRest = false;
        context.emit('post-text', state.text);
        return;
      }
      if(note === '-'){
        if(fhList.includes(state.nodeList[state.nodeList.length - 1])){
          publicService.thsToast('修饰符后必须跟音符');
          return;
        }
        if(state.nodeList[state.nodeList.length - 1] === "'"){
          state.nodeList.splice(state.nodeList.length - 1, 1);
        } else {
          note = note.replace('-', ",");
          state.nodeList.push(note);
        }
        state.showNote = false;
        state.showRest = false;
        state.text = state.nodeList.join('');
        context.emit('post-text', state.text);
        return;
      }
      if(type === 'note'){
        state.showNote = true;
        state.showRest = false;
        state.nodeText = note;
        return;
      }
      if(type === 'rest'){
        if(fhList.includes(state.nodeList[state.nodeList.length - 1])){
          publicService.thsToast('修饰符后必须跟音符');
          return;
        }
        state.showNote = false;
        state.showRest = true;
        state.nodeText = note;
        return;
      }
      // fhList
      state.showNote = false;
      state.showRest = false;
      if(fhList.includes(state.nodeList[state.nodeList.length - 1])){
        state.nodeList[state.nodeList.length - 1] = state.nodeList[state.nodeList.length - 1].replace(state.nodeList[state.nodeList.length - 1], note);
      } else {
        if(note){
          state.nodeList.push(note);
        } else {
          state.nodeList.splice(state.nodeList.length - 1, 1);
        }
      }
      state.text = state.nodeList.join('');
      console.log(state.text);
      context.emit('post-text', state.text);
    }

    function del(){
      const index = state.nodeList.length - 1;
      if(index < 0){
        return;
      }
      if(state.nodeList[index].indexOf(']') !== -1){
        state.group[state.groupIndex].splice(state.group[state.groupIndex].length - 1, 1);
        if(state.group[state.groupIndex].length === 0){
          state.group.splice(state.groupIndex, 1);
          --state.groupIndex;
          state.nodeList.splice(index, 1);
          state.text = state.nodeList.join('');
        } else {
          state.nodeList[index] = `[${state.group[state.groupIndex].join('')}]`;
        }
      } else {
        state.nodeList.splice(index, 1);
      }
      state.text = state.nodeList.join('');
      context.emit('post-text', state.text);
      console.log(state.text);
    }

    function setGroup(){
      state.showBg = !state.showBg; 
      if(state.showBg){
        ++state.groupIndex;
        state.nodeListIndex = state.nodeList.length;
      }
    }
    function selectValue(value: string, type: string){
      if(type === 'note'){
        if(state.showBg){
          if(!state.group[state.groupIndex]){
            state.group[state.groupIndex] = [];
          }
          state.group[state.groupIndex].push(value.replace('A', state.nodeText));
          state.nodeList[state.nodeListIndex] = `[${state.group[state.groupIndex].join('')}]`;
          console.log(state.nodeList);
          // state.text = state.text.substring(0, state.text[state.text.length - state.group[state.groupIndex].length - 1]);
          state.text = state.nodeList.join('');
          context.emit('post-text', state.text);
        } else {
          console.log(state.nodeText);
          // state.nodeText = value.replace('A', state.nodeText);
          state.nodeList.push(value.replace('A', state.nodeText));
          state.text = state.nodeList.join('');
          context.emit('post-text', state.text);
        }
      } else {
        if(fhList.includes(state.nodeList[state.nodeList.length - 1])){
          publicService.thsToast('修饰符后必须跟音符');
          return;
        }
        state.nodeList.push(value);
        state.text = state.nodeList.join('');
      }
      context.emit('post-text', state.text);
      console.log(state.text);
    }
    return {
      ...toRefs(state),
      trashBinOutline,
      arrowUpOutline,
      drawYf,
      selectValue,
      setGroup,
      del
    }
    // let el: any = '';
//       // const Vex = new VexFlow();
//       // const { Renderer, Stave, StaveNote, Voice, Formatter } = VexFlow.Flow;
//       console.log(abcjs);
//       // z20z21z22z23z24z25z26z27z28z29z30z31 // 休止符类型
//       onMounted(() => {
//         el= document.getElementById('output');
//         abcjs.renderAbc("paper", `X: 1
// M: 4/4
// L: 1/8
// K: Emin
// |:D2 D6|"Em"EB{c}BA <<B2 EB|~B2 AB "多个音符相连单个附点"d>"多个音符相连多个附点"B>>AG|"D"FDAD B<DA<<D|FDAD dAFD|
// "Em1"EBBA B2 EB|B2 AB defg|af"升"^e"重升"^^c "还原"=dB"降"_A"重降"__F|"Em"DEFD E2:|
// |:gf|"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|
// "Em"eB "相邻音符连线"B2- eBgB|eB "多个音符连线"(B2 defg)|"D"afe^c dBAF|"Em"DEFD "减8va"E2,,"加8va"B2''z20z21z22z23z24z25z26z27z28z29z30z31|`,{ scrollHorizontal: true, viewportHorizontal: true}); // responsive: "resize"
//         // init()
//     })
  }
}
</script>

<style scoped lang="scss">
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 250px;
  background: #ececec;
  z-index: 9999;
  .confirm{
    color: #3880ff
  }
  .cancel{
    color: red;
  }
  .tip{
    height: 30px;
    display: flex;
    text-align: center;
    div{
      flex: 1;
    }
  }
  .con{
    display: flex;
    .left,.right{
      width: 80px;
      padding: 5px;
      font-size: 14px;
      div{
        background: #ddd;
        margin-bottom: 5px;
        border-radius: 5px;
      }
    }
    .right{
        div{
          height: 56px;
          line-height: 56px;
        }
      }
      .left{
        div{
          height: 25.5px;
    line-height: 25.5px;
        }
      }
    .box{
      flex: 1;
      .noteyf::after{
        content: '';
        display: block;
        width: 10px;
        height: 2px;
        background: #fff;
        margin: 0px auto;
        position: relative;
        bottom: 10px;
      }
      .noteyf.active::after{
        background: #000;
      }
    }
    ion-col{
      div{
        background: #fff;
        border-radius: 5px;
        font-size: 14px;
        height: 37px;
        line-height: 37px;
      }
    }
  }
}
ion-icon{
  color: #333;
}
</style>
